<template>
	<view class="water_col" v-for="(item,index) in group" :key="index" :id="`water_col_box_${index}`"
		:style="{'width':w,'marginLeft':mar}">
		<view class="articleBox" v-for="(ite,ind) in optimize['column_'+index]" :key="ind" @tap="waterfall(ite)">
			<image :src="ite.Avatar" mode="widthFix" @load="emitHeight(ite,ind)" @error="emitHeight(ite,ind)">
			</image>
			<view class="articleBox-title ">{{ite.neirong}}</view>
			<view class="articleBox-label displayFlexSpaceBetween">
				<view class=" displayFlex">
					<image :src="ite.Avatar" mode=""></image>
					<view class=" ">{{ite.NAME}}</view>
					<!-- <view class=" ">{{ite.time}}</view> -->
				</view>
				<view class="articleBox-hongxin displayFlex" @tap.stop="DianzanSC(ite,ind)">
					<image v-if="item.myZan" src="/static/images/company/hongxin.png" mode="widthFix"></image>
						<image v-else src="/static/images/company/xin.png" mode="widthFix"></image>
						<view class="biji-name" :style="{ color: item.myZan ? '#FA1B0A' : '#666666' }">{{ computeNum(item.DianzanL * 1) }}</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "lj-waterfall",
		props: {
			group: {
				type: Number,
				default: 2,
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			pageSize: {
				type: Number,
				default: 10,
			}
		},
		watch: {
			group: {
				immediate: true,
				handler: function(newV, oldV) {
					setTimeout(() => {
						this.init(0)
					}, 10)
				}
			},

			list(newV, oldV) {
				setTimeout(() => {
					this.init(newV.length - this.pageSize)
				}, 10)
			}
		},
		data() {
			return {
				// widthGroup: {
				// 	2: 360,
				// 	3: 360,
				// 	4: 180,
				// 	5: 140,
				// },
				optimize: {
					list: {},
					proportion: 1,
				},
				temporaryArr: [],
				bool: false,
				lists: [

				]
			};
		},
		computed: {
			w() {
				const boxW = `${100 / this.group - this.optimize.proportion}%`
				return boxW
			},
			mar() {
				const c = `${(this.optimize.proportion*this.group/(this.group+1))}`;
				const m = `${(parseInt(c*1000)/1000).toFixed(3)}%`
				return m;
			}
		},
		methods: {
			
			computeNum(num) {
				num = num * 1;
				if (num > 10000) {
					return num / 10000 + 'w+';
				} else if (num > 1000) {
					return num / 1000 + 'k+';
				} else {
					return num;
				}
			},
			waterfall(ite) {
				console.log('点击图片：', ite);
			},
			emitHeight(ite, ind) {
				this.init(ite.index + 1)
				console.log(ite.index)
			},
			async init(index) {
				if (index >= this.list.length) return false;
				const boxHeight = await this.getBoxHeight();
				this.processingFun(boxHeight, index)
			},
			processingFun(boxHeight, index) {
				this.optimize[`column_${boxHeight.column}`].push({
					...this.list[index],
					index,
				})
				this.$forceUpdate()
			},
			async getBoxHeight() {
				return new Promise(resolve => {
					const heightArr = [];
					for (let i = 0; i < this.group; i++) {
						const query = uni.createSelectorQuery().in(this);
						query.select(`#water_col_box_${i}`).boundingClientRect(data => {
							heightArr.push({
								column: i,
								height: data.height
							});
						}).exec(() => {
							if (this.group <= heightArr.length) {
								resolve(this.compareHeight(heightArr, 'height'));
							}
						});
					}
				})
			},
			compareHeight(arr, s) {
				let oh = arr[0][s]
				let mo = []
				for (let i = arr.length - 1; i >= 0; i--) {
					if (arr[i][s] <= oh) {
						oh = arr[i][s]
					}
				}
				mo = arr.filter(i => i[s] == oh);
				return mo[0]
			},
			handleFun() {
				for (let i = 0; i < this.group; i++) {
					this.optimize[`column_${i}`] = []
				}
			}
		},
		mounted() {
			this.handleFun()
		}
	}
</script>

<style lang="scss" scoped>
	.water_col {
		float: left;
	}

	.articleBox {
		margin: 20rpx 20rpx 20rpx 0rpx;
		width: 348rpx;
		border-radius: 16rpx;
		background-color: #eef0f1;

		&-title {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			padding: 20rpx;
		}

		image {
			border-radius: 16rpx 16rpx 0 0;
			width: 348rpx;
			height: 342rpx;
		}

		&-label {
			font-weight: 500;
			font-size: 20rpx;
			// padding: 0 20rpx 27rpx;

			image {
				border-radius: 50%;
				width: 28rpx;
				height: 28rpx;
			}

			view:nth-of-type(1) {
				// margin: 0 22rpx 0 13rpx;
				color: #666666;
			}

			view:nth-of-type(2) {
				color: #999;
			}

			&-hongxin {

				image {
					margin-right: 7rpx;
					width: 40rpx;
					height: 40rpx;
				}

				view {

					font-weight: 400;
					font-size: 26rpx;
					color: #EA3325;
				}
			}

		}
	}
</style>